<template>
  <div class="mt-3 px-16">
    <div style="width: 1359px">
      <div class="">
        {{ videoDetail.video_title }}
      </div>
      <video
        style="height: 764; width: 100%"
        ref="playerDom"
        id="player"
        src=""
        controls
        autoplay
      ></video>
      <div class="rounded-xl bg-slate-200 mt-3">
        <div class="p-3">简介:</div>
        <div class="ml-6 pb-3">{{ videoDetail.video_desc }}</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { findVideoDetailById } from "@/api/video";
import { onMounted, onUnmounted, ref } from "vue";
import flvjs from "flv.js";
import { useRoute } from "vue-router";
const route = useRoute();
let flvPlayer = null;
const playerDom = ref();
const videoDetail = ref({});

// const initPlayer = function (item) {
//   if (flvjs.isSupported()) {
//     var videoElement = document.getElementById("player");
//     flvPlayer = flvjs.createPlayer({
//       type: "flv",
//       url: item.video_linkurl,
//       hasVideo: true,
//       enableWorker: true, // 启用分离的线程进行转换
//       fixAudioTimestampGap: false,
//       enableStashBuffer: false, // 关闭IO隐藏缓冲区
//       autoCleanupSourceBuffer: true,
//       hasAudio: true,
//       // duration: 1000 * 60 * 5,
//       // filesize: 113018623
//     });
//     flvPlayer.attachMediaElement(videoElement);
//     flvPlayer.load();
//     flvPlayer.on(flvjs.Events.LOADING_COMPLETE, (e) => {
//       flvPlayer.play();
//     });
//   }
// };

onUnmounted(() => {
  //   if (flvPlayer != null) {
  //     flvPlayer.pause();
  //     flvPlayer.unload();
  //     flvPlayer.detachMediaElement();
  //     flvPlayer.destroy();
  //     flvPlayer = null;
  //   }
});

onMounted(() => {
  let videoId = useRoute().params?.id;
  if (videoId) {
    findVideoDetailById({ id: videoId }).then((res) => {
      videoDetail.value = res[0];
      player.src = res[0].video_linkurl;
    });
  }
});
</script>

<style>
</style>